import { MDataDriver, MineEases, MineMotion, MineTimeline, ref } from "@dao3fun/mine-motion";
remoteChannel.onClientEvent((event) => {
    if(event.type !== 'ok'){
      return;
    }


// 创建 UiScreen
const defaultScreen = UiScreen.create();
const uiScale = UiScale.create();
/*
let _x = Math.floor(screenWidth / 240);
let _y = Math.floor(screenHeight / 210);
let a = Math.min(_x, _y);
uiScale.scale = (a * 0.4 - (a * 0.4 - 1.2) * 0.18) * 1;
defaultScreen.uiScale = uiScale;
*/
uiScale.scale = screenWidth / 1500;
defaultScreen.uiScale = uiScale;
setInterval(async ()=>{
  uiScale.scale = screenWidth / 1500;
defaultScreen.uiScale = uiScale;
/*
  _x = Math.floor(screenWidth / 240);
  _y = Math.floor(screenHeight / 210);
  a = Math.min(_x, _y);
  uiScale.scale = (a * 0.4 - (a * 0.4 - 1.2) * 0.18) * 1;
  defaultScreen.uiScale = uiScale;
  */
},10000)//10秒检测1次


let addEventList:string[] = [];
let can_show_add:boolean = true; 

function createBox(sizex:number,sizey:number,x: number, y: number, color: Vec3 , opacity:number) {
    const box = UiBox.create();
    box.size.offset.x = sizex;
    box.size.offset.y = sizey;
    box.position.offset.x = x;
    box.position.offset.y = y;
    box.backgroundColor.copy(color);
    box.backgroundOpacity = opacity;
    box.parent = defaultScreen;
    return box;
}

function createText(sizex:number,sizey:number, sizetext:number, x: number, y: number, text: string, color: Vec3, opacity: number, textcolor: Vec3) {
    const box = UiText.create();
    box.size.offset.x = sizex;
    box.size.offset.y = sizey;
    box.textContent = text;
    box.textFontSize = sizetext;
    box.position.offset.x = x;
    box.position.offset.y = y;
    box.backgroundColor.copy(color)
    box.backgroundOpacity = opacity;
    box.textColor.copy(textcolor);
    box.parent = defaultScreen;
    return box;
}

async function hello() {
    //const text1_under = createBox(400, 100, -400, 10, Vec3.create({r:185,g:255,b:255}));
    const text1 = createText(400, 100, 50, -400, 10, 'Welcome', Vec3.create({r:187,g:244,b:255}), 1, Vec3.create({r:0,g:0,b:0}));

    // 应用动画
    MineMotion.animate(text1.position.offset, [
    {value: {x: -400, y: 0}, duration: 0},
    {value: {x: 0, y: 0}, duration: 1000, ease: MineEases.easeInOut},
    {value: {x: 0, y: 0}, duration: 1000},
    {value: {x: -400, y: 0}, duration: 1000, ease: MineEases.easeInOut},
    ], {
    delay: 0,
    speed: 1
    })
    /*
    MineMotion.animate(text1_under.position.offset, [
        {value: {x: -400, y: 0}, duration: 0},
        {value: {x: 0, y: 0}, duration: 1000, ease: MineEases.easeInOut},
        {value: {x: 0, y: 0}, duration: 1000},
        {value: {x: -400, y: 0}, duration: 1000, ease: MineEases.easeInOut},
    ], {
        delay: 0,
        speed: 1
    })
    */
   
}
hello();

const give = createText(400, 100, 25, -400, 100, '', Vec3.create({r:127,g:127,b:127}), 0.5, Vec3.create({r:255,g:255,b:255}));

async function add(text:string) {
    give.textContent = text;
    MineMotion.animate(give.position.offset, [
        {value: {x: -400, y: 400}, duration: 0},
        {value: {x: 0, y: 400}, duration: 1000, ease: MineEases.easeInOut},
        {value: {x: 0, y: 400}, duration: 1000},
        {value: {x: -400, y: 400}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        delay: 0,
        speed: 1
    })
    await sleep(3000);
    give.textContent = '';
    return;
}

remoteChannel.onClientEvent((event) => {
    if(event.type !== 'add'){
      return;
    }
    addEventList.push(event.data.text);
})

setInterval(async ()=>{
  if (addEventList.length > 0 && can_show_add){
    let t = addEventList.pop();
    if (t){
        can_show_add = false;
        await add(t);
        can_show_add = true;
    }
  } 
},100)


let qpTxEventList:string[] = [];
let can_show_qpTx:boolean = true; 


const qpTx = createText(400, 100, 50, -400, 0, '', Vec3.create({r:0,g:162,b:255}), 0.9, Vec3.create({r:255,g:255,b:255}));

async function qpTxa(text:string) {
    qpTx.textContent = text;
    const txTimeLine = new MineTimeline();
    txTimeLine.animate(qpTx.position.offset, [
        {value: {x: -400, y: 0}, duration: 0},
        {value: {x: 0, y: 0}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        offset: 0,
    })
    txTimeLine.animate(qpTx.size.offset, [
        {value: {x: 400, y: 100}, duration: 0},
        {value: {x: 1500, y: screenHeight}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        offset: 0,
    })
    txTimeLine.animate(qpTx.position.offset, [
        {value: {x: 0, y: 0}, duration: 0},
        {value: {x: -400, y: 0}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        offset: 3000,
    })
    txTimeLine.animate(qpTx.size.offset, [
        {value: {x: 1500, y: screenHeight}, duration: 0},
        {value: {x: 400, y: 100}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        offset: 3000,
    })
    txTimeLine.run();
    await sleep(3900);
    qpTx.textContent = '';
    return;
}

remoteChannel.onClientEvent((event) => {
    if(event.type !== 'qpTx'){
      return;
    }
    qpTxEventList.push(event.data.text);
})

setInterval(async ()=>{
  if (qpTxEventList.length > 0 && can_show_qpTx){
    let t = qpTxEventList.pop();
    if (t){
        can_show_qpTx = false;
        await qpTxa(t);
        can_show_qpTx = true;
    }
  } 
},100)



//textt: string, textc: string, colort: Vec3, colorb: Vec3, ctt: Vec3, ctc: Vec3
//colort: {r:255,g:255,b:255}, colorb: {r:116,g:116,b:116}, ctt: {r:0,g:0,b:0}, ctc: {r:255,g:255,b:255},
//event.textt,event.textc,Vec3.create({r:255,g:255,b:255}),Vec3.create({r:116,g:116,b:116}),Vec3.create({r:0,g:0,b:0}),Vec3.create({r:255,g:255,b:255})
/*
const box1 = createBox(100,100,100, 0, Vec3.create({r: 222, g: 22, b: 22}));
const box2 = createBox(100,100,100, 0, Vec3.create({r: 22, g: 222, b: 22}));
const box3 = createBox(100,100,100, 100, Vec3.create({r: 22, g: 22, b: 222}));

const tl = new MineTimeline();
tl.animate(box1.position.offset, [
  {value: {x: 0, y: 0}, duration: 0},
  {value: {x: 100, y: 0}, duration: 1000, ease: MineEases.easeInOut},
  {value: {x: 100, y: 100}, duration: 1000, ease: MineEases.easeInOut},
  {value: {x: 0, y: 100}, duration: 1000, ease: MineEases.easeInOut},
  {value: {x: 0, y: 0}, duration: 1000, ease: MineEases.easeInOut}
], {
  offset: 0
});
tl.animate(box2.position.offset, [
  {value: {x: 100, y: 0}, duration: 0},
  {value: {x: 100, y: 100}, duration: 1000, ease: MineEases.easeInOut},
  {value: {x: 0, y: 100}, duration: 1000, ease: MineEases.easeInOut},
  {value: {x: 0, y: 0}, duration: 1000, ease: MineEases.easeInOut},
  {value: {x: 100, y: 0}, duration: 1000, ease: MineEases.easeInOut}
], {
  offset: 1000
});
tl.animate(box3.position.offset, [
  {value: {x: 100, y: 100}, duration: 0},
  {value: {x: 0, y: 100}, duration: 1000, ease: MineEases.easeInOut},
  {value: {x: 0, y: 0}, duration: 1000, ease: MineEases.easeInOut},
  {value: {x: 100, y: 0}, duration: 1000, ease: MineEases.easeInOut},
  {value: {x: 100, y: 100}, duration: 1000, ease: MineEases.easeInOut},
], {
  offset: 2000
});

tl.run();
*/





//ui血条
const backBox = createBox(500, 50, 500, 0, Vec3.create({r:127,g:127,b:127}), 0.5);

const box = UiText.create();
box.size.offset.x = 1000;
box.size.offset.y = 50;
box.position.offset.x = 500;
box.backgroundColor.r = 255;
box.backgroundColor.g = 255;
box.backgroundColor.b = 255;
box.textContent = '当前血量：/';
box.textFontSize = 18;
box.backgroundOpacity = 1;
box.textColor.copy(Vec3.create({r:255,g:255,b:255}))
box.parent = defaultScreen;

const hp = ref(0);

remoteChannel.onClientEvent((event) => {
  if(event.type !== 'hp'){
    return;
  }
  hp.value = event.data.hp/event.data.maxHp*100;
  box.textContent = `当前血量：${event.data.hp}/${event.data.maxHp}`
})

const tl = new MineTimeline({
  driver: new MDataDriver(hp, {
    damping: {
      enabled: true,
      halflife: 500,
      deltaMs: 10
    }
  })
});

tl.animate(box.size.offset, [
  {value: {x: 0}, duration: 0},
  {value: {x: 500}, duration: 100}
], {
  offset: 0
});
tl.animate(box.backgroundColor, [
  {value: {r: 255, g: 0, b: 0}, duration: 0},
  {value: {r: 255, g: 255, b: 0}, duration: 70},
  {value: {r: 0, g: 255, b: 0}, duration: 30}
], {
  offset: 0
});
tl.run();


})